import React from 'react';


import classnames from 'classnames';
//component
import ReAvatar from 'components/widgets/ReAvatar';
import ReIcon from 'components/widgets/ReIcon';


import './index.less';


export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
    };

    static defaultProps = {
        //name: 'component name'
    };


    constructor(props, context) {

        super(props, context);


        // init state;
        this.state = {
            showFocus: false,
            timer: null
        };
    }

    componentWillMount() {
        this._isMounted = true;

    }

    componentDidMount() {

    }

    componentWillUnmount() {
        this._isMounted = false;
    }


    showFocus() {
        this.setState({showFocus: true});
        clearTimeout(this.state.timer);
    }

    hideFocus() {
        this.setState({
            timer: setTimeout(() => {
                this.setState({showFocus: false});
            }, 500)
        });
    }

    focusClick(e) {
        e.preventDefault();
        e.stopPropagation();
        this.props.focusClick(e);
    }

    clickAvatar(e) {
        e.preventDefault();
        e.stopPropagation();
        this.props.clickAvatar();
    }

    organizeClick(e) {
        e.preventDefault();
        e.stopPropagation();
        this.props.showOrganizeClick(e);
    }

    render() {
        const {src, name, textWhite, focusType, viewNumber, showOrganize, showOrganizeText,isArtwork} = this.props;
        const {showFocus} = this.state;
        const pcClass = classnames({
            'orin-w-avatarwrapper-root': true,
            'pc': true,
            [this.props.className]: this.props.className ? true : false
        });
        const phoneClass = classnames({
            'orin-w-avatarwrapper-root': true,
            'phone': true,
            [this.props.className]: this.props.className ? true : false
        });

        return (
            <div>
                <div className={pcClass} onMouseOver={(e) => this.showFocus(e)}
                     onMouseLeave={(e) => this.hideFocus(e)}>
                    <ReAvatar size={100} className="avatar" onClick={(e)=>this.clickAvatar(e)}
                              src={$$.utils.pictureThumb(src, false)}/>
                    <p className={textWhite ? 'author-name white' : 'author-name'} onClick={(e)=>this.clickAvatar(e)}>{name}</p>
                    {
                        showFocus &&
                        <div className={focusType ? 'focus-btn cancel' : 'focus-btn'}
                             onClick={(e) => this.focusClick(e)}
                             onMouseOver={(e) => this.showFocus(e)}
                             onMouseLeave={(e) => this.hideFocus(e)}>
                            {focusType ? $$.LN.CANCEL_FOCUS : $$.LN.FOCUS_ON}
                        </div>
                    }
                    {
                        showOrganize && <div className="focus-btn-phone margin" onClick={(e) => this.organizeClick(e)}>
                            <ReIcon icon="sign_out" className="icon"/>
                            {showOrganizeText}
                        </div>
                    }
                    <div className={focusType ? 'focus-btn-phone cancel' : 'focus-btn-phone'}
                         onClick={(e) => this.focusClick(e)}>
                        {focusType ? '已关注' : '+ ' + $$.LN.FOCUS_ON}
                    </div>
                    <div className="view-number">
                        <i className="iconfont icon-display"/>
                        <p className="number">{viewNumber}</p>
                    </div>
                </div>
                <div className={phoneClass}>
                    <ReAvatar size={100} className="avatar" onClick={(e)=>this.clickAvatar(e)}
                              src={$$.utils.pictureThumb(src, false)}/>
                    <p className={textWhite ? 'author-name white' : 'author-name'} onClick={(e)=>this.clickAvatar(e)}>{name}</p>
                    {
                        showOrganize && <div className="focus-btn-phone margin" onClick={(e) => this.organizeClick(e)}>
                            <ReIcon icon="sign_out" className="icon"/>
                            {showOrganizeText}
                        </div>
                    }
                    <div className={focusType ? 'focus-btn-phone cancel' : 'focus-btn-phone'}
                         onClick={(e) => this.focusClick(e)}>
                        {focusType ? '已关注' : '+ ' + $$.LN.FOCUS_ON}
                    </div>
                    {
                        !isArtwork &&
                        <div className="view-number">
                            <i className="iconfont icon-display"/>
                            <p className="number">{viewNumber}</p>
                        </div>
                    }
                </div>
            </div>
        );
    }
}
